import 'package:flutter/material.dart';
import '../models/habit.dart';
import '../utils/app_theme.dart';

class HabitItem extends StatelessWidget {
  final Habit habit;
  final VoidCallback onToggle;
  final VoidCallback onTap;

  const HabitItem({
    super.key,
    required this.habit,
    required this.onToggle,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final isCompleted = habit.isCompletedToday();

    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      decoration: AppTheme.cardDecoration,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        // Checkbox
                        GestureDetector(
                          onTap: onToggle,
                          child: Container(
                            width: 24,
                            height: 24,
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: isCompleted ? AppTheme.successColor : AppTheme.borderColor,
                                width: 2,
                              ),
                              borderRadius: BorderRadius.circular(6),
                              color: isCompleted ? AppTheme.successColor : Colors.transparent,
                            ),
                            child: isCompleted
                                ? const Icon(
                                    Icons.check,
                                    size: 16,
                                    color: Colors.white,
                                  )
                                : null,
                          ),
                        ),
                        const SizedBox(width: 16),
                        
                        // Habit info
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              habit.name,
                              style: AppTheme.subheadingStyle.copyWith(
                                fontSize: 16,
                                decoration: isCompleted ? TextDecoration.lineThrough : null,
                                decorationThickness: 2,
                                color: isCompleted ? AppTheme.textSecondaryColor : AppTheme.textPrimaryColor,
                              ),
                            ),
                            const SizedBox(height: 4),
                            Text(
                              '${habit.frequency} · ${habit.amount}',
                              style: AppTheme.smallTextStyle,
                            ),
                          ],
                        ),
                      ],
                    ),
                    
                    // Status icon
                    Icon(
                      isCompleted ? Icons.check_circle : Icons.circle_outlined,
                      color: isCompleted ? AppTheme.successColor : AppTheme.textSecondaryColor,
                      size: 24,
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                
                // Detail link
                Align(
                  alignment: Alignment.centerRight,
                  child: Text(
                    '详情',
                    style: TextStyle(
                      color: AppTheme.accentColor,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
